.el-radio-group {
    display: inline-block;
    vertical-align: top;
}

.el-radio__original,
.el-radio-button__original,
.el-radio-card__original {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
}

.el-radio {
    color: #1c2438;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    user-select: none;
    margin-right: 60px;

    .el-radio__input {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: top;
        margin-top: 3px;

        .el-radio__inner {
            display: inline-block;
            position: relative;
            border: 1px solid #dddee1;
            @include border-radius(2px);
            width: 14px;
            height: 14px;
            background-color: $white;
            z-index: 1;
            transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
                background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

            &::after {
                box-sizing: content-box;
                content: "";
                border: 1px solid #fff;
                border-left: 0;
                border-top: 0;
                height: 7px;
                left: 4px;
                position: absolute;
                top: 1px;
                transform: rotate(45deg) scaleY(0);
                width: 3px;
                transition: transform 0.15s ease-in 0.05s;
                transform-origin: center;
            }
        }

        &.is-checked {
            .el-radio__inner {
                background-color: #2b74ff;
                border-color: #2b74ff;

                &::after {
                    transform: rotate(45deg) scaleY(1);
                }
            }
        }
    }

    .el-radio__label {
        display: inline-block;
        padding-left: 6px;
        line-height: 20px;
        font-size: 12px;
        vertical-align: top;
    }
}

.el-radio-button {
    position: relative;
    display: inline-block;
    border: 1px solid #dddee1;
    font-size: 12px;
    color: #1c2438;
    cursor: pointer;
    vertical-align: top;
    line-height: 1;

    .el-radio-button__inner {
        width: 180px;
        height: 34px;
        display: inline-block;
        vertical-align: top;
        line-height: 34px;
        text-align: center;
    }

    & + .el-radio-button {
        margin-left: -1px;
    }

    &:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    &:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    &.is-active {
        border-color: #2b74ff;
        border-left: 1px solid #2b74ff;
        color: #2b74ff;
        z-index: 100;
    }

    &.el-radio-button--medium {
        .el-radio-button__inner {
            width: 120px;
        }
    }

    .el-radio-button__append {
        display: inline-block;
        height: 14px;
        margin-top: 10px;
        margin-left: 5px;
        vertical-align: top;
    }
}

.el-radio-card {
    position: relative;
    display: inline-block;
    border: 1px solid #dddee1;
    font-size: 12px;
    color: #1c2438;
    vertical-align: top;
    margin-right: -1px;
    margin-top: -1px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: pointer;

    .el-radio-card__inner {
        width: 180px;
        padding-left: 64px;
        height: 78px;
        display: table;
    }

    .el-radio-card__label {
        display: table-cell;
        padding-right: 15px;
        vertical-align: middle;
        line-height: 20px;
    }

    .el-radio-card__desc {
        display: inline-block;
        margin-top: 4px;
        font-size: 10px;
        line-height: 16px;
        color: #979797;
    }

    &.status-icon {
        &::after {
            content: "";
            position: absolute;
            border: {
                width: 5px;
                style: solid;
                color: #e8e9ec #e8e9ec transparent transparent;
            }

            top: 1px;
            right: 1px;
        }
    }

    &:first-child {
        @include border-radius(4px 0 0 4px);
    }

    &:last-child {
        @include border-radius(0 4px 4px 0);
    }

    &.is-active {
        background: #f0f5ff;
        border-color: #2b74ff;
        color: #2b74ff;
        z-index: 100;

        .el-radio-card__desc {
            color: #5f96ff;
        }

        &.status-icon {
            &::after {
                border-color: #2b74ff #2b74ff transparent transparent;
            }
        }
    }

    &.el-radio-card--medium {
        .el-radio-card__inner {
            height: 58px;
        }
    }
}

.el-radio-group-col-2 {
    width: 362px;

    .el-radio-card {
        &:first-child {
            @include border-radius(4px 0 0 0);
        }

        &:nth-child(2) {
            @include border-radius(0 4px 0 0);
        }

        &:nth-child(3) {
            @include border-radius(0 0 0 4px);
        }

        &:last-child {
            @include border-radius(0 0 4px 0);
        }
    }
}

.el-radio-group-col-3 {
    width: 543px;

    .el-radio-card {
        &:first-child {
            @include border-radius(4px 0 0 0);
        }

        &:nth-child(3) {
            @include border-radius(0 4px 0 0);
        }

        &:nth-child(4) {
            @include border-radius(0 0 0 4px);
        }

        &:last-child {
            @include border-radius(0 0 4px 0);
        }
    }
}
